<template>
    <view class="life-container">
        <!-- 固定头部区域 -->
        <view class="fixed-header">
            <!-- 顶部导航标签 -->
            <view class="nav-tabs">
                <text :class="['tab-item', activeTab === 'all' ? 'active' : '']" @click="switchTab('all')">全部</text>
                <text :class="['tab-item', activeTab === 'following' ? 'active' : '']"
                    @click="switchTab('following')">关注</text>
            </view>

            <!-- 筛选选项 -->
            <view class="filter-options">
                <text :class="['filter-item', activeFilter === 'latest' ? 'active' : '']"
                    @click="switchFilter('latest')">最新发布</text>
                <text :class="['filter-item', activeFilter === 'hot' ? 'active' : '']"
                    @click="switchFilter('hot')">热门推荐</text>
                <text :class="['filter-item', activeFilter === 'replies' ? 'active' : '']"
                    @click="switchFilter('replies')">最新回复</text>
            </view>
        </view>

        <!-- 可滚动的内容区域 -->
        <scroll-view class="scrollable-content" scroll-y="true">
            <!-- <view class="content-grid">
                    <view class="content-card" v-for="(item, index) in contentList" :key="index" @tap="toDetail(item)">
                        <image class="card-image" :src="item.image" mode="aspectFill"></image>
                        <view class="card-info">
                            <text class="card-title">{{ item.title }}</text>
                            <view class="user-info">
                                <image class="user-avatar" :src="item.userAvatar" mode="aspectFill"></image>
                                <text class="user-name">{{ item.userName }}</text>
                                <text class="view-count">{{ item.viewCount }}</text>
                            </view>
                        </view>
                    </view>
                </view> item-box -->

            <view class="container">
                <view class="cont-box"
                    :style="{ '--layout-width': 100 / flowData.column - flowData.columnSpace + 0.5 + '%' }"
                    v-for="(numVal, index) in flowData.column" :key="numVal">
                    <view class="content-card" v-for="(item, j) in flowData[`column_${index + 1}`]" :key="j">
                        <!-- <image class="img-tip" :src="item.image" mode="widthFix" lazy-load />
                        <view class="tit-tip multi-line-omit">{{ item.title }}</view>
                        <view class="desc-tip multi-line-omit">{{ item.desc }}</view> -->

                        <image class="card-image" :src="item.image" mode="widthFix">
                        </image>
                        <view class="card-info">
                            <text class="card-title">{{ item.title }}</text>
                            <view class="user-info">
                                <image class="user-avatar" :src="item.userAvatar" mode="aspectFill"></image>
                                <text class="user-name">{{ item.userName }}</text>
                                <text class="view-count">{{ item.viewCount }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            activeTab: 'all',
            activeFilter: 'latest',
            // 全部内容列表
            allContentList: [
                {
                    image: 'https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082',
                    title: '紫砂壶的矿有哪些呢，给你看看从矿到壶到30倍...',
                    userAvatar: '../static/img/album.png',
                    userName: '逸尘轩·紫砂文化',
                    viewCount: '293'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '一图带您了解蒜香橄榄油意面有什么...',
                    userAvatar: '../static/img/album.png',
                    userName: '意面姐姐',
                    viewCount: '17'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '【家庭是一个共生系统】你的改变能撼动全家...',
                    userAvatar: '../static/img/album.png',
                    userName: '心理咨询师小王',
                    viewCount: '156'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '【自由肉肉】孩子的零食终于有着落了！今天教...',
                    userAvatar: '../static/img/album.png',
                    userName: '美食达人',
                    viewCount: '89'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '一图带您了解蒜香橄榄油意面有什么🍝其被誉...',
                    userAvatar: '../static/img/album.png',
                    userName: '意面姐姐',
                    viewCount: '17'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '【家庭是一个共生系统】你的改变能撼动全家...',
                    userAvatar: '../static/img/album.png',
                    userName: '心理咨询师小王',
                    viewCount: '156'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '【自由肉肉】孩子的零食终于有着落了！今天教...',
                    userAvatar: '../static/img/album.png',
                    userName: '美食达人',
                    viewCount: '89'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '一图带您了解蒜香橄榄油意面有什么🍝其被誉...',
                    userAvatar: '../static/img/album.png',
                    userName: '意面姐姐',
                    viewCount: '17'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '【家庭是一个共生系统】你的改变能撼动全家...',
                    userAvatar: '../static/img/album.png',
                    userName: '心理咨询师小王',
                    viewCount: '156'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '【自由肉肉】孩子的零食终于有着落了！今天教...',
                    userAvatar: '../static/img/album.png',
                    userName: '美食达人',
                    viewCount: '89'
                }
            ],
            // 关注内容列表
            followingContentList: [
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '跟着大厨学做菜，一周美食精选合集',
                    userAvatar: '../static/img/album.png',
                    userName: '米其林三星主厨',
                    viewCount: '521'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '每日穿搭灵感 | 春季流行趋势解析',
                    userAvatar: '../static/img/album.png',
                    userName: '时尚博主小K',
                    viewCount: '328'
                }
            ],
            // 热门推荐列表
            hotContentList: [
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '2024年最受欢迎的10道家常菜做法',
                    userAvatar: '../static/img/album.png',
                    userName: '美食频道官方',
                    viewCount: '9999+'
                },
                {
                    image: 'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                    title: '春季养生必备，这些食材不要错过',
                    userAvatar: '../static/img/album.png',
                    userName: '中医养生堂',
                    viewCount: '8526'
                }
            ],
            imageList: [
                "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
                "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
                "https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
                "https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
                "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
                "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
            ], //测试图片
            flowData: {
                list: [], // 数据值
                column: 2, // 瀑布列数
                columnSpace: 2 // 瀑布列宽间距
            }

        }
    },
    onLoad() {
        this.flowData.list = this.contentList
        this.$nextTick(() => {
            this.initData(); // 数据初始化
        });
    },
    created() {
        /* 初始化每一列的数据 */
        for (let i = 1; i <= this.flowData.column; i++) {
            this.$set(this.flowData, `column_${i}`, []);
        }
    },
    mounted() {
    },

    computed: {
        // 根据当前选中的标签和筛选条件显示对应的内容列表
        contentList() {
            let list = this.activeTab === 'all' ? this.allContentList : this.followingContentList

            // 根据筛选条件处理列表
            switch (this.activeFilter) {
                case 'hot':
                    return this.hotContentList
                case 'latest':
                    return list
                case 'replies':
                    // 这里可以根据回复数排序，这里简单返回原列表
                    return list.slice().reverse()
                default:
                    return list
            }
        },
        leftArray() {
            return this.contentList.filter((_, index) => index % 2 === 0);
        },
        rightArray() {
            return this.contentList.filter((_, index) => index % 2 !== 0);
        }
    },
    methods: {
        updateFlowData() {
            this.flowData.list = this.contentList

            this.$nextTick(() => {
                this.initData(); // 数据初始化
            });
        },

        /* 数据初始化 */
        initData() {
            const groupList = this.dynamicGrouping(this.flowData.list, this.flowData.column); // 数据动态分组
            groupList.forEach((item, i) => (this.flowData[`column_${i + 1}`] = item));
        },
        /** 数据动态分组
         * @param {Object} data 分组的数据列表
         * @param {Object} i 需要分几组
         * @returns {Array} groups 已分组的数据
         */
        dynamicGrouping(data, i) {
            if (i <= 0) return "分组数必须大于0";
            const groups = [];
            for (let j = 0; j < i; j++) {
                groups.push([]);
            }
            for (let k = 0; k < data.length; k++) {
                const groupIndex = k % i;
                groups[groupIndex].push(data[k]);
            }
            return groups;
        },


        // 切换标签页
        switchTab(tab) {
            this.activeTab = tab
            // 切换标签时重置筛选条件
            this.activeFilter = 'latest'
            this.updateFlowData()
        },
        // 切换筛选条件
        switchFilter(filter) {
            this.activeFilter = filter
            this.updateFlowData()
        },
        toDetail(item) {
            uni.navigateTo({
                url: `/pagesSocial/life/note`
            })
        }
    }
}
</script>

<style lang="scss">
// ======

.image {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}


.life-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f5f5f5;

    .fixed-header {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: #fff;
        padding: 20rpx 20rpx 0;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        .nav-tabs {
            display: flex;
            margin-bottom: 20rpx;

            .tab-item {
                margin-right: 30rpx;
                font-size: 32rpx;
                color: #666;
                padding: 10rpx 0;

                &.active {
                    color: #333;
                    font-weight: bold;
                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 40rpx;
                        height: 4rpx;
                        background: #2ed573;
                        border-radius: 2rpx;
                    }
                }
            }
        }

        .filter-options {
            display: flex;
            margin-bottom: 20rpx;
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 10rpx;

            &::-webkit-scrollbar {
                display: none;
            }

            .filter-item {
                margin-right: 20rpx;
                padding: 10rpx 20rpx;
                font-size: 28rpx;
                color: #666;
                background: #f5f5f5;
                border-radius: 30rpx;
                white-space: nowrap;

                &.active {
                    color: #fff;
                    background: #2ed573;
                }
            }
        }
    }

    .scrollable-content {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 20rpx;

        &::-webkit-scrollbar {
            display: none;
        }


        .content-grid {
            column-count: 1;
            column-gap: 20rpx;
            padding: 0 10rpx;
            width: 48%;

            .content-card {
                break-inside: avoid;
                width: 100%;
                margin-bottom: 20rpx;
                background: #fff;
                border-radius: 12rpx;
                overflow: hidden;
                box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
                display: inline-block;

                .card-image {
                    width: 100%;
                    height: auto;
                    aspect-ratio: 3/4;
                    object-fit: cover;
                }

                .card-info {
                    padding: 20rpx;

                    .card-title {
                        font-size: 28rpx;
                        color: #333;
                        line-height: 1.4;
                        margin-bottom: 16rpx;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }

                    .user-info {
                        display: flex;
                        align-items: center;
                        padding-top: 10rpx;
                        border-top: 1rpx solid rgba(0, 0, 0, 0.05);

                        .user-avatar {
                            width: 44rpx;
                            height: 44rpx;
                            border-radius: 50%;
                            margin-right: 10rpx;
                        }

                        .user-name {
                            font-size: 24rpx;
                            color: #666;
                            flex: 1;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .view-count {
                            font-size: 24rpx;
                            color: #999;
                            display: flex;
                            align-items: center;

                            &::before {
                                content: '';
                                display: inline-block;
                                width: 24rpx;
                                height: 24rpx;
                                background: url('../static/img/album.png') no-repeat;
                                background-size: contain;
                                margin-right: 6rpx;
                            }
                        }
                    }
                }

                &:hover {
                    transform: translateY(-2rpx);
                    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
                    transition: all 0.3s ease;
                }
            }
        }
    }
}

// ====== 瀑布流方案

.container {
    display: flex;
    justify-content: space-between;
    // padding: 20rpx;
    $borderRadius: 12rpx;

    .cont-box {
        width: var(--layout-width);





        .item-box {
            width: 100%;
            padding-bottom: 20rpx;
            margin-bottom: 30rpx;
            border-radius: $borderRadius;
            box-shadow: 0rpx 3rpx 6rpx rgba(0, 46, 37, 0.08);

            .img-tip {
                width: 100%;
                border-radius: $borderRadius $borderRadius 0 0;
            }

            .tit-tip {
                text-align: justify;
                font-size: 30rpx;
                padding: 10rpx 20rpx 0;
                font-weight: 900;
            }

            .desc-tip {
                text-align: justify;
                font-size: 26rpx;
                padding: 5rpx 20rpx 0;
                margin-top: 10rpx;
            }
        }




        .content-card {
            break-inside: avoid;
            width: 100%;
            margin-bottom: 20rpx;
            background: #fff;
            border-radius: 12rpx;
            overflow: hidden;
            box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
            display: inline-block;

            .card-image {
                width: 100%;
                // height: auto;
                aspect-ratio: 3/4;
                object-fit: cover;
            }

            .card-info {
                padding: 20rpx;

                .card-title {
                    font-size: 28rpx;
                    color: #333;
                    line-height: 1.4;
                    margin-bottom: 16rpx;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                }

                .user-info {
                    display: flex;
                    align-items: center;
                    padding-top: 10rpx;
                    border-top: 1rpx solid rgba(0, 0, 0, 0.05);

                    .user-avatar {
                        width: 44rpx;
                        height: 44rpx;
                        border-radius: 50%;
                        margin-right: 10rpx;
                    }

                    .user-name {
                        font-size: 24rpx;
                        color: #666;
                        flex: 1;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .view-count {
                        font-size: 24rpx;
                        color: #999;
                        display: flex;
                        align-items: center;

                        &::before {
                            content: '';
                            display: inline-block;
                            width: 24rpx;
                            height: 24rpx;
                            background: url('../static/img/album.png') no-repeat;
                            background-size: contain;
                            margin-right: 6rpx;
                        }
                    }
                }
            }

            &:hover {
                // transform: translateY(-2rpx);
                // box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
                // transition: all 0.3s ease;
            }
        }

    }
}

/* 多行省略 */
.multi-line-omit {
    word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
    text-overflow: ellipsis; // 溢出用省略号显示
    overflow: hidden; // 超出的文本隐藏
    display: -webkit-box; // 作为弹性伸缩盒子模型显示
    -webkit-line-clamp: 2; // 显示的行
    -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}

/* 单行省略 */
.one-line-omit {
    width: 100%; // 宽度100%：1vw等于视口宽度的1%；1vh等于视口高度的1%
    white-space: nowrap; // 溢出不换行
    overflow: hidden; // 超出的文本隐藏
    text-overflow: ellipsis; // 溢出用省略号显示
}
</style>
